<template>
  <div
    class="search-main"
    :style="
      'background-image:url(' +
      require('@/assets/images/search_bg.jpg') +
      ');' +
      'background-size:100% 300px;' +
      'background-repeat:no-repeat'
    "
  >
    <div class="search-header">
      <div class="head-logo">
        <a href="/v1/home"></a>
      </div>
      <div class="s-h-input">
        <input
          type="text"
          placeholder="歌曲、歌手"
          @input="onSearchInput($event)"
        />
        <a href="javascript:;" class="s-btn" @click="onSearchClick">搜索</a>
      </div>
    </div>
    <div class="search-content">
      <div class="container search-container">
        <div class="s-c-row">
          <DetailList :data="CurData"></DetailList>
        </div>
      </div>
    </div>
    <offset-action></offset-action>
    <Footer />
  </div>
</template>

<script>
import { onBeforeMount, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import DetailList from "@/components/PlayList/Detail/detailList";
import Footer from "@/views/footer";
import MouseWrap from "@/components/Plugin/MouseWrap";
import Service from "@/services";
import "./index.scss";
export default {
  name: "test",
  components: {
    MouseWrap,
    Footer,
    DetailList,
  },
  setup(props) {
    const router = useRouter();
    const service = new Service();
    const state = reactive({
      CurInput: "",
      CurData: [],
    });
    onBeforeMount(() => {
      let data = router.currentRoute.value.query;
      if (data.name) {
        getDataList(data.name);
      }
    });
    const getDataList = async (param) => {
      const data = await service.findMusicByNames({
        name: param,
      });
      state.CurData = {
        songlist: data,
        songnum: data.length,
      };
    };

    const onSearchInput = (e) => {
      state.CurInput = e.target.value;
    };

    const onSearchClick = () => {
      getDataList(state.CurInput);
    };

    return {
      ...toRefs(state),
      onSearchInput,
      onSearchClick,
    };
  },
};
</script>

<style>
</style>